<template>

  <!-- 弹层 -->
  <p>
    <button @click="visible = !visible">打开弹层{{ visible }}</button>
  </p>
  <Test title="弹层测试" :visible="visible" @SwitchOpen="(showDialog) => visible = showDialog">
    <p>
      <label>水果名称</label><br>
      <input type="text">
    </p>
    <p>
      <label>水果单价</label><br>
      <input type="number">
    </p>

    <template #footer>
      <button @click="visible = false">X</button>
      <button>√</button>
    </template>
  </Test>

  <!-- v-model -->
  <txt v-model:fastName="fastName" v-model:lastName="lastName" v-model="age"></txt>
  <p>{{ fastName + lastName }} {{ age }}</p>

  <!-- page -->

  <div id="app">
    <page v-model:page="page" v-model:page-size="pageSize" :total="total"></page>
    <hr>
    <p>
      当前页：{{ page }}<br>
      每页显示条数：{{ pageSize }}<br>
      总条数：{{ total }}<br>
    </p>
  </div>

  <!-- 自定义 -->
   <inde title="标题" :age="11" @load="console.log" name="mio"></inde>
</template>

<script>
export default {
  // 定义组件的数据部分
  data() {
    return {
      //弹层
      visible: false,
      //v-model
      age: 18,
      fastName: 'Mio',
      lastName: 'Akiyama',
      //page
      page: 1,
      pageSize: 2,
      total: 20,
    }
  },
}

</script>